/* =================================================================
   ADVANCED FILTER BAR COMPONENT - BEM NAMING CONVENTION & PROPER SCOPING
   ================================================================= */

/* All FilterBar styles are scoped under .tasknotes-plugin for proper isolation */

/* Main Container */
.tasknotes-plugin .advanced-filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-md);
    margin-bottom: var(--tn-spacing-lg);
}

/* Top Controls (Filter Icon + Search + Templates Button) */
.tasknotes-plugin .filter-bar__top-controls {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    position: relative; /* Set as positioning context for the dropdown */
    z-index: 10; /* Ensure this container is on top of the filter box below */
    isolation: isolate; /* Create a new stacking context */
}


/* Filter toggle base (positioning for badge) */
.tasknotes-plugin .filter-bar__filter-toggle {
  position: relative; /* context for badge */
}

/* Active filter badge dot */
.tasknotes-plugin .filter-bar__filter-toggle.has-active-filters::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #a78bfa; /* subtle purple */
}

/* Clear all button in Filter section header */
.tasknotes-plugin .filter-bar__clear-filters {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-spacing-xs);
  margin-left: var(--tn-spacing-sm);
  padding: 2px 6px;
  border-radius: var(--radius-s);
  border: 1px solid var(--color-grey-tint);
  background-color: var(--color-grey-base);
  color: var(--text-normal);
  font-size: var(--font-ui-small);
}
.tasknotes-plugin .filter-bar__clear-filters:hover {
  background-color: var(--interactive-hover);
}
.tasknotes-plugin .filter-bar__clear-filters svg {
  width: 16px; height: 16px;
}

/* Clear all filters button in Filter section header - matches Save button style exactly */
.tasknotes-plugin .filter-bar__clear-all-button {
  /* Ensure identical sizing and alignment with Save button */
  width: var(--input-height);
  height: var(--input-height);
  min-width: var(--input-height);
  min-height: var(--input-height);
  padding: 0;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
}

/* Ensure the icon is properly centered */
.tasknotes-plugin .filter-bar__clear-all-button svg {
  width: 16px;
  height: 16px;
}

/* Close modal button - matches other buttons exactly but with transparent background */
.tasknotes-plugin .filter-bar__close-modal-button {
  /* Identical sizing to Clear and Save buttons */
  width: var(--input-height);
  height: var(--input-height);
  min-width: var(--input-height);
  min-height: var(--input-height);
  padding: 0;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  /* Transparent background */
  background: transparent !important;
  border: none !important;
}

/* Ensure the close icon is properly centered */
.tasknotes-plugin .filter-bar__close-modal-button svg {
  width: 16px;
  height: 16px;
}

/* Natural Language Date Input Enhancement */
.tasknotes-plugin .filter-date-input-container {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    width: 100%;
}

.tasknotes-plugin .filter-date-text-input {
    flex: 1;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Date input validation states - subtle styling */
.tasknotes-plugin .filter-date-text-input.is-valid {
    border-left: 2px solid var(--color-green);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(var(--color-green-rgb), 0.15);
}

.tasknotes-plugin .filter-date-text-input.is-invalid {
    border-left: 2px solid var(--color-red);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(var(--color-red-rgb), 0.15);
}

.tasknotes-plugin .filter-date-text-input.is-empty {
    border-left: none;
    background-color: transparent;
    box-shadow: none;
}

.tasknotes-plugin .filter-date-help-button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--text-muted);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.tasknotes-plugin .filter-date-help-button:hover {
    background: var(--interactive-hover);
    color: var(--text-normal);
    border-color: var(--text-normal);
}

.filter-date-help-tooltip {
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    padding: var(--tn-spacing-sm);
    box-shadow: var(--shadow-s);
    min-width: 200px;
    max-width: 300px;
    font-size: var(--font-ui-smaller);
}

.filter-date-help-tooltip h4 {
    margin: 0 0 var(--tn-spacing-xs) 0;
    color: var(--text-normal);
    font-weight: var(--font-semibold);
}

.filter-date-help-tooltip ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.filter-date-help-tooltip li {
    padding: 2px var(--tn-spacing-xs);
    color: var(--text-muted);
    background: var(--background-modifier-hover);
    border-radius: var(--radius-s);
    font-family: var(--font-monospace);
    font-size: 11px;
}

.tasknotes-plugin .filter-bar__filter-toggle {
    padding: var(--tn-spacing-xs);
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tn-button-height-md);
    height: var(--tn-button-height-md);
    transition: all 0.2s ease;
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__filter-toggle:hover {
    background: var(--interactive-hover) !important;
    color: var(--text-normal);
}

.tasknotes-plugin .filter-bar__filter-toggle--active {
    background: var(--interactive-accent-tint);
    color: var(--color-accent);
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__templates-button {
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-ui-small);
    font-weight: 500;
    transition: all 0.2s ease;
    height: var(--tn-button-height-md); /* Consistent height */
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__templates-button:hover {
    background: var(--interactive-hover) !important;
    color: var(--text-normal);
    transform: none;
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__templates-button--active {
    background: var(--interactive-accent-tint);
    color: var(--color-accent);
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__templates-button--saved-view-active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border: none;
    box-shadow: 0 0 0 1px var(--color-accent);
}

/* Search Input */
.tasknotes-plugin .filter-bar__search-input {
    flex: 1;
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    transition: all 0.2s ease;
    min-width: 200px;
    height: var(--tn-button-height-md); /* Consistent height */
}

.tasknotes-plugin .filter-bar__search-input:focus {
    outline: 1px solid var(--color-accent);
    border-color: var(--color-accent);
}

.tasknotes-plugin .filter-bar__search-input::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

/* Main Filter Box (collapsible popup) */
.tasknotes-plugin .filter-bar__main-box {
    position: absolute;
    top: calc(100% + 4px); /* Position below the top controls with a small gap */
    left: 0; /* Align to left edge near the filter button */
    right: 10px; /* Add some margin from the right edge */
    width: auto; /* Let it size itself */
    max-width: 600px; /* Maximum preferred width */
    min-width: 300px; /* Minimum usable width */
    z-index: 1000; /* High z-index */
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-lg);
    padding: var(--tn-spacing-lg);
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 80vh;
    overflow-y: auto;
}

.tasknotes-plugin .filter-bar__main-box--collapsed {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    pointer-events: none; /* Prevent interaction when hidden */
}

/* =================================================================
   VIEW SELECTOR SECTION
   ================================================================= */

.tasknotes-plugin .filter-bar__view-selector-dropdown {
    position: absolute;
    top: 100%;
    right: 0; /* Default align to right of the container */
    left: auto;
    min-width: 240px;
    max-width: 320px;
    z-index: 1000; /* Ensure it's on top */
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    max-height: 400px;
    overflow-y: auto;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Left-aligned variant for Views-left configuration */
.tasknotes-plugin .filter-bar__view-selector-dropdown.filter-bar__view-selector-dropdown--left {
    left: 0;
    right: auto;
}

.tasknotes-plugin .filter-bar__view-selector-dropdown--hidden {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
}

.tasknotes-plugin .filter-bar__view-section {
    padding: var(--tn-spacing-md);
}

.tasknotes-plugin .filter-bar__view-section:not(:last-child) {
    border-bottom: none;
}

.tasknotes-plugin .filter-bar__view-section-header {
    font-weight: 600; /* Slightly stronger for better hierarchy */
    font-size: var(--font-ui-small);
    color: var(--text-normal);
    text-transform: none; /* Normal case */
    letter-spacing: 0; /* Natural spacing */
    margin-bottom: var(--tn-spacing-sm);
    padding-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .filter-bar__view-item-container {
    display: flex;
    align-items: center;
    border-radius: var(--radius-s);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 2px 0;
    position: relative;
    overflow: hidden;
}

.tasknotes-plugin .filter-bar__view-item-container:hover {
    background: var(--background-modifier-hover);
    transform: translateX(2px);
}

/* Drag and drop styles */
.tasknotes-plugin .filter-bar__view-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: var(--tn-spacing-xs);
    color: var(--text-faint);
    cursor: grab;
    font-size: 14px;
    user-select: none;
    opacity: 0;
    transition: all 0.2s ease;
    border-radius: var(--radius-s);
    position: relative;
}

.tasknotes-plugin .filter-bar__view-drag-handle::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    box-shadow:
        0 -4px 0 currentColor,
        0 4px 0 currentColor;
}

.tasknotes-plugin .filter-bar__view-item-container:hover .filter-bar__view-drag-handle {
    opacity: 1;
}

.tasknotes-plugin .filter-bar__view-drag-handle:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
    transform: scale(1.05);
}

.tasknotes-plugin .filter-bar__view-drag-handle:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.tasknotes-plugin .filter-bar__view-item-container--dragging {
    opacity: 0.8;
    transform: scale(1.02);
    background: var(--background-modifier-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-s);
    z-index: 1000;
    transition: none;
}

.tasknotes-plugin .filter-bar__view-item-container--placeholder {
    opacity: 0.5;
    background: var(--interactive-accent-tint);
    border: 2px dashed var(--color-accent);
    border-radius: var(--radius-s);
    pointer-events: none;
    min-height: 30px;
    transition: all 0.2s ease;
    animation: placeholderPulse 1s ease-in-out infinite;
}

@keyframes placeholderPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.7;
    }
}

.tasknotes-plugin .filter-bar__view-item {
    flex: 1;
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    background: none;
    border: none !important;
    box-shadow: none;
    outline: none;
    color: var(--text-normal);
    text-align: left;
    justify-content: flex-start;
    cursor: pointer;
    font-size: var(--font-ui-small);
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.tasknotes-plugin .filter-bar__view-item--active {
    color: var(--text-on-accent);
}

.tasknotes-plugin .filter-bar__view-item-container--active {
    background: var(--interactive-accent);
    border-radius: var(--radius-s);
    border: none;
}

.tasknotes-plugin .filter-bar__view-item-container--active:hover {
    background: var(--interactive-accent-hover);
    transform: translateX(2px);
}

.tasknotes-plugin .filter-bar__view-delete {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--tn-spacing-xs);
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-right: var(--tn-spacing-xs);
}

.tasknotes-plugin .filter-bar__view-delete:hover {
    background: var(--background-modifier-hover);
    color: var(--text-error);
}

.tasknotes-plugin .filter-bar__view-action {
    display: block;
    width: 100%;
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    background: none;
    border: none;
    color: var(--color-accent);
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-s);
    font-size: var(--font-ui-small);
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 2px 0;
}

.tasknotes-plugin .filter-bar__view-action:hover {
    background: var(--interactive-accent-tint);
}

.tasknotes-plugin .filter-bar__view-empty-message {
    padding: var(--tn-spacing-lg);
    color: var(--text-muted);
    font-size: var(--font-ui-small);
    text-align: center;
    background: var(--background-modifier-hover);
    margin: var(--tn-spacing-sm);
}

/* =================================================================
   COLLAPSIBLE FILTER SECTIONS
   ================================================================= */

.tasknotes-plugin .filter-bar__section {
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .filter-bar__section:last-child {
    margin-bottom: 0;
}

.tasknotes-plugin .filter-bar__section--hidden {
    display: none;
}

.tasknotes-plugin .filter-bar__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    transition: all 0.2s ease;
    margin-bottom: 2px;
}

.tasknotes-plugin .filter-bar__section-header-main {
    display: flex;
    align-items: center;
    flex-grow: 1;
    cursor: pointer;
    padding: var(--tn-spacing-sm) 0;
}

.tasknotes-plugin .filter-bar__section-header-main:hover {
    background: var(--interactive-hover);
}

.tasknotes-plugin .filter-bar__section-header-main::before {
    content: "▼";
    margin-right: var(--tn-spacing-xs);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 10px;
    color: var(--text-muted);
}

.tasknotes-plugin .filter-bar__section-header--collapsed .filter-bar__section-header-main::before {
    transform: rotate(-90deg);
}

.tasknotes-plugin .filter-bar__section-header-actions {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);

    padding-right: var(--tn-spacing-sm);
}

/* Use consistent button system */
.tasknotes-plugin .filter-bar__save-button {
    /* Remove individual styles - use tn-btn tn-btn--icon tn-btn--ghost classes */
    padding: 4px;
}

.tasknotes-plugin .filter-bar__save-button svg {
    width: 16px;
    height: 16px;
}

/* Expand/Collapse all group buttons - Add pointer cursor but keep good hover */
.tasknotes-plugin .filter-bar__expand-groups,
.tasknotes-plugin .filter-bar__collapse-groups {
    padding: var(--tn-spacing-xs);
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    color: var(--text-muted);
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tn-button-height-md);
    height: var(--tn-button-height-md);
    transition: all 0.2s ease;
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__expand-groups:hover,
.tasknotes-plugin .filter-bar__collapse-groups:hover {
    background: var(--interactive-hover);
    color: var(--text-normal);
}

.tasknotes-plugin .filter-bar__expand-groups svg,
.tasknotes-plugin .filter-bar__collapse-groups svg {
    width: 16px;
    height: 16px;
}

.tasknotes-plugin .filter-bar__section-title {
    font-weight: 500; /* Slightly lighter */
    font-size: var(--font-ui-small); /* Consistent size */
    color: var(--text-muted); /* Muted for subtlety */
    text-transform: none; /* Normal case */
    letter-spacing: 0; /* Natural spacing */
}

.tasknotes-plugin .filter-bar__active-view-name {
    font-weight: 400;
    font-size: var(--font-ui-smaller);
    color: var(--text-accent);
    margin-left: var(--tn-spacing-xs);
    font-style: italic;
}

.tasknotes-plugin .filter-bar__section-content {
    padding: var(--tn-spacing-md);
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    opacity: 1;
    max-height: 1000px; /* Large enough for content */
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tasknotes-plugin .filter-bar__section-content--collapsed {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}

/* =================================================================
   FILTER BUILDER SECTION
   ================================================================= */

.tasknotes-plugin .filter-bar__filter-builder {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-md);
}

/* Filter Groups and Conditions */
.tasknotes-plugin .filter-bar__group {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-md);
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border); /* Subtle border for grouping */
    border-radius: var(--radius-m);
    position: relative;
}

/* Remove styling for the top-level group to blend with its container */
.tasknotes-plugin .filter-bar__filter-builder > .filter-bar__group {
    background: transparent;
    border: none;
    padding: 0;
}

.tasknotes-plugin .filter-bar__group .filter-bar__group {
    background: var(--background-secondary-alt);
    border-color: var(--background-modifier-border-hover);
}

.tasknotes-plugin .filter-bar__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--tn-spacing-sm);
}

.tasknotes-plugin .filter-bar__conjunction {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .filter-bar__conjunction .dropdown {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    height: 28px;
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    border-radius: var(--radius-s);
    transition: background-color 0.2s ease;
}

.tasknotes-plugin .filter-bar__conjunction .dropdown:hover {
    background-color: var(--background-modifier-hover);
}

.tasknotes-plugin .filter-bar__conjunction-text {
    font-size: var(--font-ui-small);
    color: var(--text-normal);
}

.tasknotes-plugin .filter-bar__children {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-sm);
    margin-left: 0;
}

.tasknotes-plugin .filter-bar__condition .dropdown,
.tasknotes-plugin .filter-bar__condition .text-input {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: var(--tn-spacing-xs);
    height: 28px;
    max-width: 200px;
    flex: 1;
}

.tasknotes-plugin .filter-bar__condition .dropdown:hover,
.tasknotes-plugin .filter-bar__condition .text-input:hover {
    background-color: var(--background-modifier-hover);
}

.tasknotes-plugin .filter-bar__condition {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-xs) 0; /* Let parent padding handle horizontal space */
    background: transparent; /* No background */
    border: 1px; /* No border */
    border-radius: 0;
    flex-wrap: wrap;
    transition: background-color 0.2s ease;
}

.tasknotes-plugin .filter-bar__condition:hover {
    background-color: var(--background-modifier-hover);
}

.tasknotes-plugin .filter-bar__condition-prefix {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    font-weight: 500;
    text-align: right;
    min-width: 50px; /* More flexible width */
    padding-right: var(--tn-spacing-sm);
}

.tasknotes-plugin .filter-bar__value-input {
    border: none; /* No borders on inputs */
    background: transparent; /* Transparent background */
    padding: var(--tn-spacing-xs);
    border-radius: var(--radius-s);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
	width: auto;
    height: 28px;
    transition: background-color 0.2s ease;
}

.tasknotes-plugin .filter-bar__property-select:hover,
.tasknotes-plugin .filter-bar__operator-select:hover,
.tasknotes-plugin .filter-bar__value-input:hover {
    background-color: var(--background-modifier-hover);
}

.tasknotes-plugin .filter-bar__property-select:focus,
.tasknotes-plugin .filter-bar__operator-select:focus,
.tasknotes-plugin .filter-bar__value-input:focus {
    background-color: var(--background-modifier-hover);
    outline: none;
}

/* A more specific rule to override default component styles within the value container */
.tasknotes-plugin .filter-bar__value-container .text-input,
.tasknotes-plugin .filter-bar__value-container .dropdown .select-input {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    height: 26px;
}

.tasknotes-plugin .filter-bar__value-container .text-input:focus {
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__value-container {
    display: flex;
    align-items: center;
    gap: 0; /* No gap for combined look */
    flex: 1;
	width: 100%;
    border-radius: var(--radius-s);
    padding: 0 var(--tn-spacing-xs);
    transition: all 0.2s ease;
}

.tasknotes-plugin .filter-bar__value-input {
    border: none;
    background: transparent;
    padding: var(--tn-spacing-xs);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    width: 100%;
    height: 28px;
}

.tasknotes-plugin .filter-bar__value-input:focus {
    outline: none;
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__delete-button {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--tn-spacing-xs);
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: auto;
}

.tasknotes-plugin .filter-bar__delete-button:hover {
    background: var(--background-modifier-hover);
    color: var(--text-error);
}

.tasknotes-plugin .filter-bar__group-actions {
    display: flex;
    gap: var(--tn-spacing-md);
    margin-top: var(--tn-spacing-sm);
    border-top: none;
    padding-top: 0;
}

.tasknotes-plugin .filter-bar__action-button {
    padding: var(--tn-spacing-xs);
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-ui-small);
    border-radius: var(--radius-s);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .filter-bar__action-button:hover {
    background-color: var(--background-modifier-hover);
    color: var(--text-normal);
}

.tasknotes-plugin .filter-bar__action-button svg {
    width: 14px;
    height: 14px;
}

/* =================================================================
   DISPLAY & ORGANIZATION SECTION
   ================================================================= */

.tasknotes-plugin .filter-bar__display-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tn-spacing-md);
    align-items: center;
}

.tasknotes-plugin .filter-bar__sort-container,
.tasknotes-plugin .filter-bar__group-container {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .filter-bar__label {
    font-size: var(--font-ui-small);
    color: var(--text-normal);
    font-weight: 500;
}

.tasknotes-plugin .filter-bar__sort-container .dropdown,
.tasknotes-plugin .filter-bar__group-container .dropdown {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    height: 28px;
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    min-width: 120px;
    border-radius: var(--radius-s);
    transition: background-color 0.2s ease;
}

.tasknotes-plugin .filter-bar__sort-container .dropdown:hover,
.tasknotes-plugin .filter-bar__group-container .dropdown:hover {
    background-color: var(--background-modifier-hover);
}

.tasknotes-plugin .filter-bar__sort-direction {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: var(--tn-spacing-xs);
    height: 28px;
    width: 30px;
    border-radius: var(--radius-s);
    color: var(--text-accent);
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tasknotes-plugin .filter-bar__sort-direction:hover {
    background-color: var(--background-modifier-hover);
    color: var(--text-accent-hover);
    transform: scale(1.1);
}

/* =================================================================
   VIEW OPTIONS SECTION
   ================================================================= */

.tasknotes-plugin .filter-bar__view-options {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .filter-bar__view-option {
    display: flex;
    align-items: center;
}

.tasknotes-plugin .filter-bar__view-option-label {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    cursor: pointer;
    font-size: var(--font-ui-small);
    color: var(--text-normal);
}

.tasknotes-plugin .filter-bar__view-option-checkbox {
    margin: 0;
}

.tasknotes-plugin .filter-bar__view-option-text {
    user-select: none;
}

/* =================================================================
   RESPONSIVE DESIGN
   ================================================================= */

/* Mobile styles */
@media (max-width: 768px) {
    .tasknotes-plugin .advanced-filter-bar {
        padding: var(--tn-spacing-sm);
        gap: var(--tn-spacing-sm);
    }

    .tasknotes-plugin .filter-bar__condition {
        flex-direction: column;
        align-items: stretch;
        gap: var(--tn-spacing-xs);
    }

    .tasknotes-plugin .filter-bar__display-controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--tn-spacing-sm);
    }

    .tasknotes-plugin .filter-bar__sort-container,
    .tasknotes-plugin .filter-bar__group-container {
        justify-content: space-between;
    }

    .tasknotes-plugin .filter-bar__children {
        margin-left: 0;
    }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .tasknotes-plugin .filter-bar__condition {
        flex-wrap: wrap;
    }

    .tasknotes-plugin .filter-bar__value-container {
        min-width: 120px;
    }
}

/* =================================================================
   ACCESSIBILITY & FOCUS STATES
   ================================================================= */

.tasknotes-plugin .filter-bar__property-select:focus,
.tasknotes-plugin .filter-bar__operator-select:focus,
.tasknotes-plugin .filter-bar__conjunction-select:focus,
.tasknotes-plugin .filter-bar__sort-select:focus,
.tasknotes-plugin .filter-bar__group-select:focus {
    outline: 1px solid var(--color-accent);
}

.tasknotes-plugin .filter-bar__delete-button:focus,
.tasknotes-plugin .filter-bar__action-button:focus,
.tasknotes-plugin .filter-bar__view-options-button:focus,
.tasknotes-plugin .filter-bar__section-header:focus,
.tasknotes-plugin .filter-bar__view-selector-button:focus {
    outline: 1px solid var(--color-accent);
}

/* =================================================================
   ERROR STATE STYLING
   ================================================================= */

.tasknotes-plugin .filter-bar-error {
    padding: var(--size-4-2);
    color: var(--text-muted);
    text-align: center;
    font-size: var(--font-ui-smaller);
    border-radius: var(--radius-s);
    background-color: var(--background-modifier-hover);
}

/* =================================================================
   DARK MODE COMPATIBILITY
   ================================================================= */

.theme-dark .tasknotes-plugin .filter-bar__main-box {
    background: var(--background-secondary-alt);
}

.theme-dark .tasknotes-plugin .filter-bar__group {
    background: var(--background-secondary);
}

.theme-dark .tasknotes-plugin .filter-bar__condition {
    background: var(--background-primary);
}

.theme-dark .tasknotes-plugin .filter-bar-error {
    background-color: var(--background-modifier-hover);
    color: var(--text-muted);
}

/* =================================================================
   HIGH CONTRAST MODE
   ================================================================= */

@media (prefers-contrast: high) {
    .tasknotes-plugin .advanced-filter-bar {
        border-width: 2px;
    }

    .tasknotes-plugin .filter-bar__condition,
    .tasknotes-plugin .filter-bar__group {
        border-width: 2px;
    }

    .tasknotes-plugin .filter-bar__property-select,
    .tasknotes-plugin .filter-bar__operator-select,
    .tasknotes-plugin .filter-bar__value-input {
        border-width: 2px;
    }
}

/* =================================================================
   BUTTON ICONS VIA CSS PSEUDO-ELEMENTS
   ================================================================= */

/* Add filter button - plus sign */
.tasknotes-plugin .filter-bar__add-filter::before {
    content: "+ ";
    margin-right: 4px;
    font-weight: bold;
    color: var(--color-accent);
}

/* Add filter group button - plus sign in circle */
.tasknotes-plugin .filter-bar__add-group::before {
    content: "⊕ ";
    margin-right: 4px;
    font-weight: bold;
    color: var(--color-accent);
}

